/*
 * @Author: your name
 * @Date: 2020-12-07 09:07:52
 * @LastEditTime: 2020-12-16 18:07:55
 * @LastEditors: Please set LastEditors
 * @Description: zz-header 页面头部
 * @FilePath: \gitee-WeBi\js\vue\components\zzHeader.js
 */
Vue.component("zz-header",{
    template:`<div 
        class="zz-header zz-df zz-df-jc-sb"
        :class="[isFixed?'fixed':'rel login']">
        <div class="header-title-area zz-df zz-df-ai-c">
            <div class="login">
                <img class="zz-img-fit" :src="isLogin?'../../../images/zzHeader/logo.png':'../../../images/zzHeader/logo2.png'" />
            </div>
            <div class="title">{{title}}</div>
        </div>
        <div v-if="!isLogin" class="header-user zz-df">
            <ul class="tab-page zz-df zz-df-jc-sb">
                <li 
                    v-for="(item,index) in tabData"
                    :ket="index"
                    class="item zz-ta-c"
                    :class="[tabIndex==index?'is-active':'']"
                    @click.stop="changeTabChange(index)">{{item.tabName}}</li>
            </ul>
            <div class="head-img">
                <img class="zz-img-fit" src="../../../images/zzHeader/logo2.png" />
            </div>
        </div>
    </div>`,
    props:{
        title:{ // 
            type:String,
            default:""
        },
        //
        isLogin:{
            type:Boolean,
            default:false,
        },
        //
        isFixed:{
            type:Boolean,
            default:false
        },
        type:{
            type:Number,
            default:0
        }
    },
    computed:{
        
    },
    created(){
        this.tabIndex = this.type;
    },
    data(){
        return {
            // logo的图片链接
            // 访问 + 配置切换
            tabIndex:0,
            tabData:[
                {
                    tabName:"访问",
                },
                {
                    tabName:"配置",
                }
            ]
        };
    },
    methods:{
        // 页面容器切换
        changeTabChange(index){
            try {
                this.tabIndex = index;
                this.$emit("tab-change",index);
                // --- 切换模块时，更新地址栏
                if(window["zzTabs"+this.tabIndex] && window["zzSideBarObj"+this.tabIndex]){
                    // --- 对应模块当前正显示的子页面链接
                    var curPath = window["zzTabs"+this.tabIndex].curTabMenu.url;
                    // ---
                    window["zzTabs"+this.tabIndex].tabChange(curPath);
                    // ---
                    window["zzTabs"+this.tabIndex].matchSideBar(curPath);
                    // ---
                    window["zzSideBarObj"+this.tabIndex].refreshLocationHref(curPath);
                }
            } catch (error) {
                console.log("---页面容器切换出错啦~ ~!!!---",error);
            }
        }
    }
});
